<template>
  <div>
    <div class="head1">
      <div class="head1_1" style="margin: 0 auto">
        <ul style="list-style-type: none">
          <li class="head1_1_li">
            <a href="#" id="dingbu">小米官网</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a href="#">小米商城</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a style="width: 26px" href="#">MIUI</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a style="width: 18px" href="#">loT</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a style="width: 36px" href="#">云服务</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a href="#">天星数科</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a style="width: 24px" href="#">有品</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a style="width: 72px" href="#">小爱开放平台</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a href="#">企业团购</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a href="#">协议规则</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <!-- <div class="xiazai"> -->
            <a style="width: 46px" href="#">下载app</a>
            <span class="head1_1_s">|</span>
            <!-- </div> -->
          </li>
          <li class="head1_1_li">
            <a style="width: 90px" href="#">Select Location</a>
          </li>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <li class="head1_1_li">
            <a style="width: 70px; margin-left: 170px" href="#">
              雷军

              <img src="./images/xuan.jpg" style="margin-left: 20px" />
            </a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a href="#">消息通知</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li">
            <a href="#">我的订单</a>
            <span class="head1_1_s">|</span>
          </li>
          <li class="head1_1_li" style="position: absolute">
            <router-link to="/shopcart" style="width: 92px; margin-left: 8px">
              <img src="./images/gouwuche.jpg" style="margin-right: 6px" />
              购物车(0)
            </router-link>
            <span class="head1_1_s">|</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 头部 -->
    <div class="header" style="margin: 0 auto">
      <div class="head2">
        <a href="/home">
          <img class="head2_img" src="./images/logo.png" alt="" />
        </a>
        <div class="head2_div1">
          <div class="head2_div1_1">
            <span class="tou2_s">Xiaomi手机</span>
            <div class="head2_x1">
              <div class="x1">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/shouji1.webp" />
                    <p class="x1_p1">Xiaomi 12S Ultra</p>
                    <p class="x1_p2">5999元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/shouji2.webp" />
                    <p class="x1_p1">Xiaomi 12S Pro</p>
                    <p class="x1_p2">5999元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/shouji3.webp" />
                    <p class="x1_p1">Xiaomi 12S</p>
                    <p class="x1_p2">3999元起</p>
                  </a>
                </div>
                <div class="x1_4">
                  <a href="#">
                    <img src="./images/shouji4.webp" />
                    <p class="x1_p1">Xiaomi 12Pro 天玑版</p>
                    <p class="x1_p2">3999元起</p>
                  </a>
                </div>
                <div class="x1_5">
                  <a href="#">
                    <img src="./images/shouji5.webp" />
                    <p class="x1_p1">Xiaomi Civi 1S</p>
                    <p class="x1_p2">2299元起</p>
                  </a>
                </div>
                <div class="x1_6">
                  <a href="#">
                    <img src="./images/shouji6.webp" />
                    <p class="x1_p1">Xiaomi 12 Pro</p>
                    <p class="x1_p2">4699元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_2">
            <span class="tou2_s">Redmi手机</span>
            <div class="head2_x2">
              <div class="x2">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/yundong1.webp" />
                    <p class="x1_p1">Redmi Note 11T Pro+</p>
                    <p class="x1_p2">1999元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/yundong2.webp" />
                    <p class="x1_p1">Redmi Note 11T Pro</p>
                    <p class="x1_p2">1699元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/yundong3.png" />
                    <p class="x1_p1">Redmi Note 11SE</p>
                    <p class="x1_p2">999元起</p>
                  </a>
                </div>
                <div class="x1_4">
                  <a href="#">
                    <img src="./images/yundong4.webp" />
                    <p class="x1_p1">Redmi 10A</p>
                    <p class="x1_p2">649元起</p>
                  </a>
                </div>
                <div class="x1_5">
                  <a href="#">
                    <img src="./images/yundong5.webp" />
                    <p class="x1_p1">Redmi K50 Pro</p>
                    <p class="x1_p2">2999元起</p>
                  </a>
                </div>
                <div class="x1_6">
                  <a href="#">
                    <img src="./images/yundong6.webp" />
                    <p class="x1_p1">Redmi K50</p>
                    <p class="x1_p2">2399元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_3">
            <span class="tou2_s">电视</span>
            <div class="head2_x3">
              <div class="x3">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/dianshi1.webp" />
                    <p class="x1_p1">Redmi 智能电视X55 2022</p>
                    <p class="x1_p2">2299元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/dianshi2.webp" />
                    <p class="x1_p1">Redmi 智能电视X65 2022</p>
                    <p class="x1_p2">2999元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/dianshi3.webp" />
                    <p class="x1_p1">小米电视6 65° OLED</p>
                    <p class="x1_p2">6699元起</p>
                  </a>
                </div>
                <div class="x1_4">
                  <a href="#">
                    <img src="./images/dianshi4.webp" />
                    <p class="x1_p1">小米电视 大师 77° OLED</p>
                    <p class="x1_p2">17999元起</p>
                  </a>
                </div>
                <div class="x1_5">
                  <a href="#">
                    <img src="./images/dianshi5.webp" />
                    <p class="x1_p1">小米透明电视</p>
                    <p class="x1_p2">49999元起</p>
                  </a>
                </div>
                <div class="x1_6">
                  <a href="#">
                    <img src="./images/dianshi6.webp" />
                    <p class="x1_p1">小米电视 大师 65英寸OLED</p>
                    <p class="x1_p2">8999元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_4">
            <span class="tou2_s">笔记本</span>
            <div class="head2_x4">
              <div class="x4">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/bijiben1.webp" />
                    <p class="x1_p1">Xiaomi Book Pro 14 2022</p>
                    <p class="x1_p2">6799元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/bijiben2.webp" />
                    <p class="x1_p1">Xiaomi Book Pro 16 2022</p>
                    <p class="x1_p2">7399元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/bijiben3.webp" />
                    <p class="x1_p1">RedmiBook Pro 14 2022锐龙版</p>
                    <p class="x1_p2">5299元起</p>
                  </a>
                </div>
                <div class="x1_4">
                  <a href="#">
                    <img src="./images/bijiben4.webp" />
                    <p class="x1_p1">RedmiBook Pro 15 2022锐龙版</p>
                    <p class="x1_p2">5499元起</p>
                  </a>
                </div>
                <div class="x1_5">
                  <a href="#">
                    <img src="./images/bijiben5.webp" />
                    <p class="x1_p1">RedmiBook Pro 14 锐龙版</p>
                    <p class="x1_p2">4699元起</p>
                  </a>
                </div>
                <div class="x1_6">
                  <a href="#">
                    <img src="./images/bijiben1.webp" />
                    <p class="x1_p1">RedmiBook Pro 14 2022</p>
                    <p class="x1_p2">5399元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_5">
            <span class="tou2_s">平板</span>
            <div class="head2_x5">
              <div class="x4">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/bijiben6.webp" />
                    <p class="x1_p1">小米平板5</p>
                    <p class="x1_p2">1849元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/bijiben7.webp" />
                    <p class="x1_p1">小米平板5 Pro 5G</p>
                    <p class="x1_p2">3349元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/bijiben8.webp" />
                    <p class="x1_p1">小米平板5 Pro</p>
                    <p class="x1_p2">2349元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_6">
            <span class="tou2_s">家电</span>
            <div class="head2_x6">
              <div class="x6">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/saodi1.webp" />
                    <p class="x1_p1">米家空调 新一级 1.5匹</p>
                    <p class="x1_p2">66元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/saodi2.webp" />
                    <p class="x1_p1">米家空调 新一级 2.5匹</p>
                    <p class="x1_p2">99元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/saodi3.webp" />
                    <p class="x1_p1">米家空调 新一级 3.5匹</p>
                    <p class="x1_p2">1299元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_7">
            <span class="tou2_s">路由器</span>
            <div class="head2_x7">
              <div class="x7">
                <div class="x1_1">
                  <a href="#">
                    <img src="./images/jingshui1.webp" />
                    <p class="x1_p1">Redmi 电竞路由器 AX5400</p>
                    <p class="x1_p2">5999元起</p>
                  </a>
                </div>
                <div class="x1_2">
                  <a href="#">
                    <img src="./images/jingshui2.webp" />
                    <p class="x1_p1">小米路由器AX6000</p>
                    <p class="x1_p2">5999元起</p>
                  </a>
                </div>
                <div class="x1_3">
                  <a href="#">
                    <img src="./images/jingshui3.webp" />
                    <p class="x1_p1">小米路由器AX9000</p>
                    <p class="x1_p2">3999元起</p>
                  </a>
                </div>
                <div class="x1_4">
                  <a href="#">
                    <img src="./images/jingshui4.webp" />
                    <p class="x1_p1">Xiaomi HomeWiFi 三频 Mesh</p>
                    <p class="x1_p2">3999元起</p>
                  </a>
                </div>
                <div class="x1_5">
                  <a href="#">
                    <img src="./images/jingshui5.webp" />
                    <p class="x1_p1">小米路由器4A</p>
                    <p class="x1_p2">2299元起</p>
                  </a>
                </div>
                <div class="x1_6">
                  <a href="#">
                    <img src="./images/jingshui6.webp" />
                    <p class="x1_p1">Xiaomi 12 Pro</p>
                    <p class="x1_p2">4699元起</p>
                  </a>
                </div>
              </div>
            </div>
          </div>
          <div class="head2_div1_8">
            <span class="tou2_s">服务中心</span>
            <div class="head2_x8"></div>
          </div>
          <div class="head2_div1_9">
            <span class="tou2_s">社区</span>
            <div class="head2_x9"></div>
          </div>
        </div>
        <div class="head2_div2">
          <form action="" style="z-index: 1">
            <input type="text" class="head2_div2_form1" />
            <input class="head2_div2_form2" type="submit" value="" />
          </form>
          <div class="div10_div2">
            <ul>
              <li>
                <a class="div10_div2_a" href="#" target="_blank">全部商品</a>
              </li>
              <li><a class="div10_div2_a" href="#" target="_blank">红米</a></li>
              <li><a class="div10_div2_a" href="#" target="_blank">手机</a></li>
              <li>
                <a class="div10_div2_a" href="#" target="_blank">黑鲨5</a>
              </li>
              <li><a class="div10_div2_a" href="#" target="_blank">冰箱</a></li>
              <li><a class="div10_div2_a" href="#" target="_blank">空调</a></li>
              <li>
                <a class="div10_div2_a" href="#" target="_blank">洗衣机</a>
              </li>
              <li><a class="div10_div2_a" href="#" target="_blank">电视</a></li>
              <li>
                <a class="div10_div2_a" href="#" target="_blank">Redmi K50</a>
              </li>
              <li>
                <a class="div10_div2_a" href="#" target="_blank"
                  >Redmi G 2022</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "XHeader",
};
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
/* 开头 */
.header {
  width: 1518px;
  background-color: #ffffff;
}

.head1 {
  position: relative;
  width: 100%;
  height: 40px;
  background-color: #333333;
}

.head1_1 {
  width: 1226px;
  height: 40px;
  margin-left: 146px;
  margin-right: 146px;
}

.head1_1_li {
  height: 40px;
  /* width: 55px; */
  display: inline-block;
}

.head1_1_li > a {
  height: 40px;
  width: 55px;
  line-height: 40px;
  color: #b0b0b0;
  text-decoration: none;
  font-size: 12px;
  height: 40px;
  display: inline-block;
}

.head1_1_li > a:hover {
  color: #ffffff;
}

.head1_1_s {
  color: #424242;
  margin: 0 4px;
}

.head2 {
  width: 1226px;
  height: 100px;
  margin-left: 146px;
  margin-right: 146px;
  position: relative;
}

.head2_img {
  width: 56px;
  height: 56px;
  margin-top: 25px;
  display: inline-block;
}

.head2_div1 {
  width: 700px;
  display: inline-block;
  margin-left: 100px;
  float: left;
}

.head2_div1 span {
  font-size: 15px;
}

.head2_div1_1 {
  position: absolute;
  width: 80px;
  height: 55px;

  margin-top: 46px;
  padding-left: 25px;
  padding-right: 10px;
}

.head2_div1_2 {
  position: absolute;
  width: 78px;
  height: 55px;
  /* padding-top: 46px; */
  margin-top: 46px;
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: blue; */
  margin-left: -70px;
  left: 300px;
}

.head2_div1_3 {
  position: absolute;
  width: 32px;
  height: 55px;
  margin-top: 46px;
  /* padding-top: 46px; */
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: red; */
  left: 420px;
  margin-left: -70px;
}

.head2_div1_4 {
  position: absolute;
  width: 48px;
  height: 55px;
  /* padding-top: 46px; */
  margin-left: -70px;
  margin-top: 46px;
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  left: 500px;
  /* background-color: blue; */
}

.head2_div1_5 {
  margin-left: -70px;
  position: absolute;
  width: 32px;
  height: 55px;
  /* padding-top: 46px; */
  margin-top: 46px;
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: red; */
  left: 580px;
}

.head2_div1_6 {
  margin-left: -70px;
  position: absolute;
  width: 32px;
  height: 55px;
  /* padding-top: 46px; */
  margin-top: 46px;
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: blue; */
  left: 650px;
}

.head2_div1_7 {
  margin-left: -70px;
  position: absolute;
  width: 48px;
  height: 55px;
  /* padding-top: 46px; */
  margin-top: 46px;
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: red; */
  left: 720px;
}

.head2_div1_8 {
  margin-left: -70px;
  position: absolute;
  width: 64px;
  height: 55px;
  /* padding-top: 46px; */
  margin-top: 46px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: blue; */
  left: 816px;
}

.head2_div1_9 {
  margin-left: -70px;
  position: absolute;
  width: 32px;
  height: 55px;
  /* padding-top: 46px; */
  margin-top: 46px;
  padding-left: 10px;
  padding-right: 10px;
  /* padding-bottom: 38px; */
  /* background-color: red; */
  left: 900px;
}

.head2_x1 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;
  /* right: 10px; */
  left: -327px;
  display: none;
}

.head2_div1_1:hover .head2_x1 {
  display: block;
}

.x1 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x1 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.x1_3 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.x1 a {
  text-decoration: none;
}

.x1_p1 {
  color: #4e4e4e;
  font-size: 14px;
  /* margin-left: 24px; */
  text-align: center;
  margin-bottom: 5px;
}

.x1_p2 {
  font-size: 13px;
  color: #ff9a55;
  /* margin-left: 48px; */
  text-align: center;
}

.x1_1 {
  width: 200px;
  height: 250px;
  float: left;
}

.x1_2 {
  width: 200px;
  height: 250px;
  float: left;
}

.x1_3 {
  width: 200px;
  height: 250px;
  float: left;
}

.x1_4 {
  width: 200px;
  height: 250px;
  float: left;
}

.x1_5 {
  width: 200px;
  height: 250px;
  float: left;
}

.x1_6 {
  width: 200px;
  height: 250px;
  float: left;
}

.head2_x2 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;
  /* right: 10px; */
  left: -427px;
  display: none;
}

.x2 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x2 a {
  text-decoration: none;
}

.x2 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.head2_div1_2:hover .head2_x2 {
  display: block;
}

.head2_x3 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;
  /* right: 10px; */
  left: -525px;
  display: none;
}

.x3 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x3 a {
  text-decoration: none;
}

.x3 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.head2_div1_3:hover .head2_x3 {
  display: block;
}

.head2_x4 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;
  /* right: 10px; */
  left: -577px;
  display: none;
}

.x4 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x4 a {
  text-decoration: none;
}

.x4 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.head2_div1_4:hover .head2_x4 {
  display: block;
}

.head2_x5 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;
  /* right: 10px; */
  left: -645px;
  display: none;
}

.x5 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x5 a {
  text-decoration: none;
}

.x5 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.head2_div1_5:hover .head2_x5 {
  display: block;
}

.head2_x6 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;
  /* right: 10px; */
  left: -697px;
  display: none;
}

.x6 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x6 a {
  text-decoration: none;
}

.x6 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.head2_div1_6:hover .head2_x6 {
  display: block;
}

.head2_x7 {
  width: 1518px;
  height: 250px;
  position: absolute;
  /* background-color: red; */
  background-color: #ffffff;
  z-index: 5;
  top: 54px;

  left: -749px;
  display: none;
}

.x7 {
  margin-left: 146px;
  width: 1226px;
  float: left;
  height: 250px;
}

.x7 a {
  text-decoration: none;
}

.x7 img {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-right: 10px;
  padding-right: 20px;
  /* margin-right: 30px; */
  /* margin: 0 auto; */
  border-right: 1px solid #e0e0e0;
}

.head2_div1_7:hover .head2_x7 {
  display: block;
}

.tou2_s {
  cursor: pointer;
}

.tou2_s:hover {
  color: #ff6c0d;
}

.head2_ul {
  list-style-type: none;
}

.head2_li {
  display: inline-block;
  /* margin-right: 1px; */
}

.head2_s {
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  padding-right: 10px;
  /* position: absolute; */
  float: left;
  cursor: pointer;
  /* line-height: 40px; */
}

.head2_1_ {
  width: 1500px;
  height: 50px;
  background-color: aqua;
  /* display: block; */
  /* float: left; */
}

/* .head3 {
         width: 1226px;
         margin-left: 146px;
         margin-right: 146px;
         
     } */

.head3 {
  width: 1226px;
  margin-left: 146px;
  margin-right: 146px;
  height: 400px;
  margin-top: 14px;
  margin-bottom: 35px;
  overflow: hidden;
  float: left;
}

.head3_lunbo {
  width: 4904px;
  height: 400px;
  animation: text 15s infinite backwards;
  /*消除图片间隔*/
}

.head3_lunbo img {
  width: 1226px;
  height: 400px;
  float: left;
}

@keyframes text {
  /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
  0%,
  20% {
    margin-left: 0px;
  }

  25%,
  45% {
    margin-left: -1226px;
  }

  50%,
  70% {
    margin-left: -2452px;
  }

  75%,
  100% {
    margin-left: -3678px;
  }
}

.head2_div2 {
  position: relative;
  width: 296px;
  height: 50px;
  left: 908px;
  top: -60px;
  border: 1px solid #e0e0e0;
}

.head2_div2_form1 {
  width: 240px;
  height: 50px;
}

.head2_div2_form2 {
  width: 52px;
  height: 54px;
  background-color: #ffffff;
  border-top: 1px solid #858585;
  border-right: 1px solid #858585;
  border-bottom: 1px solid #858585;
  border-left: 1px solid #ffffff;
  background-image: url(./images/sousuo1.jpg);
  background-repeat: no-repeat;
  position: absolute;
  left: 244px;
  cursor: pointer;
  z-index: 1;
}

.div10_div2 {
  z-index: 5;
  position: relative;
  /* top: 0px; */
  /* left: -px; */
  width: 240px;
  height: 150px;
  display: none;
  overflow: auto;
  border-bottom: 1px solid #858585;
  border-left: 1px solid #858585;
  border-right: 1px solid #858585;
  background-color: #ffffff;
}

.div10_div2 a {
  color: #999999;
  font-size: 12px;
  text-decoration: none;
  padding-left: 15px;
  padding-bottom: 5px;
}

.head2_div2:hover .div10_div2 {
  display: block;
}
</style>
